<template>
  <div>

    <!--表格内容-->
    <el-table ref="invoice" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe
              highlight-current-row :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
              @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
              :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
      <el-table-column property="fptt" label="发票抬头">
      </el-table-column>
      <el-table-column property="nsrsbh" label="纳税人识别号">
      </el-table-column>
      <el-table-column property="sjh" label="手机号">
      </el-table-column>
      <el-table-column property="dzyx" label="电子邮箱">
      </el-table-column>
      <el-table-column property="zcgsdz" label="注册公司地址">
      </el-table-column>
      <el-table-column property="khh" label="开户行">
      </el-table-column>
      <el-table-column property="yhzh" label="银行账户">
      </el-table-column>
      <el-table-column property="zcgsdh" label="注册公司电话">
      </el-table-column>
      <el-table-column property="sjrxm" label="收件人姓名">
      </el-table-column>
      <el-table-column property="sjrdz" label="收件人地址">
      </el-table-column>
      <el-table-column property="sjryb" label="收件人邮编">
      </el-table-column>
      <el-table-column property="ybnsrzm" label="一般纳税人证明">
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                     @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                     @click="rowDel( scope.row);"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form ref="editForm" :model="formFileds">
      <el-row :gutter="24">
<!--                <el-col :span="12">-->
<!--                  <el-form-item>-->
<!--                    <el-input v-model="formFileds.text"></el-input>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="2">-->
<!--                  <el-form-item>-->
<!--                    <el-button type="primary" @click="onSubmit">查询-->
<!--                    </el-button>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
                <el-col :span="2">
                  <el-form-item>
                    <el-button type="primary" @click="add">增加
                    </el-button>
                  </el-form-item>
                </el-col>
      </el-row>
    </el-form>
    
    <!-- -弹出层 -->
    <InvoiceAdd ref="invoiceAddRef" v-if="invoiceAdd" :invoiceAdd="invoiceAdd"
                       @dialogClose="dialogClose"></InvoiceAdd>
    <InvoiceEdit ref="invoiceEditRef" v-if="invoiceEdit" :invoiceEdit="invoiceEdit"
                        @dialogClose="dialogClose" :tableData="editProps"></InvoiceEdit>
  </div>
</template>

<script>
import InvoiceAdd from './invoiceAdd.vue';
import InvoiceEdit from './invoiceEdit.vue';
import {getInvoice,delInvoice} from '../../api/personalCenter/personalCenter';
export default {
  name: "invoice",
  computed: {
    InvoiceAdd() {
      return InvoiceAdd
    }
  },
  components: {
    InvoiceAdd,
    InvoiceEdit
  },
  data(){
    return{
      formFileds:{},
      tableData:[
        {
          id: '',
          userid: '',
          username: '',
          fptt: '',
          nsrsbh: "",
          sjh: '',
          dzyx: '',
          zcgsdz: '',
          khh: '',
          yhzh: '',
          zcgsdh: '',
          sjrxm: '',
          sjrdz: '',
          sjryb: '',
          ybnsrzm: '',
          deleteflag: ''
        }
      ],
      invoiceAdd: false,
      invoiceEdit: false,
      mine: [],
      editProps: ''
    }
  },
  methods:{
    getInvoice(){
      getInvoice().then((res) => {
        if(res){
          // console.log(res.data);
          console.log(res);
          this.total = res.data.total;
          this.tableData = res.data;
        }
      });
    },
    add(){
      this.invoiceAdd = true;
    },
    rowDel(row) {
      console.log(row.id);
      // 让当前删除按钮失焦
      // event.target.blur();
      this.$confirm('确定要删除当前行吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // let data = {
        //   id: row.id
        // }
        // console.log(data);
        let id = row.id;
        this.param = 'id=' + id ;
        delInvoice(this.param).then((res) => {
          if(res){
            console.log(res);
            this.tableData.splice(row.id, 1);
            this.$message.success('删除成功');
            this.getList();
          }

        })

      });
    },
    dialogClose () {
      this.invoiceEdit = false;
      this.invoiceAdd = false;
      this.getList();
    },
    rowEdit (index, row) {
      // //当前选中行
      this.invoiceEdit = true;
      this.editProps = row;
    },
    handleRowClick (row, event, column) {

      // 仅选中当前行
      // this.setCurRowChecked(row);
    },
    handleCheckedAllAndCheckedNone (selection) {

      // 当前选中仅一行时操作-（当前表格行高亮）
      1 != selection.length && this.$refs.invoice.setCurrentRow();
    },
  },
  //页面加载
  mounted(){
    this.getInvoice();
    console.log('tokenValue',localStorage.getItem('tokenValue'));
    console.log(localStorage);
  }
}
</script>

<style scoped>

</style>